import Nano, {Component, Fragment, Img} from 'nano-jsx'
import {Context} from '../../../Context'
import {i18n, sentenceKey} from '../../../i18n'
import {EnhanceConfig} from './setting-items/EnhanceConfig'
import {FilePathInMatch} from './setting-items/FilePathInMatch'
import {FilterNonExistsFiles} from './setting-items/FilterNonExistsFiles'
import {FullUrlInMatch} from './setting-items/FullUrlInMatch'
import {GetFavicon} from './setting-items/GetFavicon'
import {GetFileIcon} from './setting-items/GetFileIcon'
import {HistoryLimit} from './setting-items/HistoryLimit'
import {InputPathDirectly} from './setting-items/InputPathDirectly'
import {Language} from './setting-items/Language'
import {NotifyFileOpen} from './setting-items/NotifyFileOpen'
import {OutPluginImmediately} from './setting-items/OutPluginImmediately'
import {PinyinIndex} from './setting-items/PinyinIndex'
import {ShowBookmarkCatalogue} from './setting-items/ShowBookmarkCatalogue'

export interface EnhanceSettingItemProps {
    slot: Component
    context: Context
}

export interface EnhanceSettingItemState {}

export class EnhanceSettingItem extends Component<EnhanceSettingItemProps, EnhanceSettingItemState> {
    override render() {
        return (this.props.context.enableEnhanceConfig
            ? this.props.slot
            : <Fragment/>)
    }
}

export interface ApplicationSettingCardProps {
    context: Context
}

export interface ApplicationSettingCardState {}

export class ApplicationSettingCard extends Component<ApplicationSettingCardProps, ApplicationSettingCardState> {
    private icon: string = ``

    private roundRound() {
        if (this.props.context.enableRoundRound) {
            utools.showNotification(i18n.t(sentenceKey.roundCloseTips))
            Context.update(Context.enableRoundRoundId, false)
        } else {
            utools.showNotification(i18n.t(sentenceKey.roundTips))
            Context.update(Context.enableRoundRoundId, true)
        }
        utools.outPlugin()
    }

    override render() {
        return (
            <Fragment>
                <div class="gap"/>
                <div
                    id="application-setting-card"
                    class="gap"
                />
                <div class="form-item application-setting-card card">
                    <div class="card-header">
                        <Img
                            class={`icon card-icon ${this.props.context.enableRoundRound ? 'round-round' : ''}`}
                            src={this.icon}
                            onclick={() => this.roundRound()}
                        />
                        <span class="title">{i18n.t(sentenceKey.pluginSetting)}</span>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal">
                            <Language context={this.props.context}/>
                            <div class="divider"/>
                            <NotifyFileOpen context={this.props.context}/>
                            <div class="divider"/>
                            <OutPluginImmediately context={this.props.context}/>
                            <div class="divider"/>
                            <InputPathDirectly context={this.props.context}/>
                            <div class="divider"/>
                            <EnhanceConfig context={this.props.context}/>
                            <div
                                class="divider text-center"
                                data-content={i18n.t(sentenceKey.search)}
                            />
                            <PinyinIndex context={this.props.context}/>
                            <div
                                class="divider text-center"
                                data-content={i18n.t(sentenceKey.file)}
                            />
                            <GetFileIcon context={this.props.context}/>
                            <EnhanceSettingItem
                                slot={<Fragment>
                                    <div class="divider"/>
                                    <FilterNonExistsFiles context={this.props.context}/>
                                    <div class="divider"/>
                                    <FilePathInMatch context={this.props.context}/>
                                </Fragment>}
                                context={this.props.context}
                            />
                            <div
                                class="divider text-center"
                                data-content={i18n.t(sentenceKey.browser)}
                            />
                            <GetFavicon context={this.props.context}/>
                            <div class="divider"/>
                            <ShowBookmarkCatalogue context={this.props.context}/>
                            <EnhanceSettingItem
                                slot={<Fragment>
                                    <div class="divider"/>
                                    <FullUrlInMatch context={this.props.context}/>
                                </Fragment>}
                                context={this.props.context}
                            />
                            <EnhanceSettingItem
                                slot={<Fragment>
                                    <div class="divider"/>
                                    <HistoryLimit context={this.props.context}/>
                                </Fragment>}
                                context={this.props.context}
                            />
                            {/*<EnhanceSettingItem*/}
                            {/*    slot={<Fragment>*/}
                            {/*        <div*/}
                            {/*            class="divider text-center"*/}
                            {/*            data-content="其他"*/}
                            {/*        />*/}
                            {/*    </Fragment>}*/}
                            {/*    context={this.props.context}*/}
                            {/*/>*/}
                        </form>
                    </div>
                </div>
            </Fragment>
        )
    }
}
